<template>
  <div class="table2 lf">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form mb-10">
      <a-form-item field="paymethod" label="发放时间">
        <ms-date
          v-model:start="listParams.startTime"
          v-model:end="listParams.endTime"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item field="status" label="发放状态" :show-colon="false">
        <a-select
          placeholder="请选择"
          :style="{ minWidth: '200px' }"
          v-model="listParams.status"
          @change="changeCurrent(1)"
          allow-clear
        >
          <a-option :value="10">待审核</a-option>
          <a-option :value="-100">审核不通过</a-option>
          <a-option :value="30">审核通过，待发放</a-option>
          <a-option :value="40">已发放</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="activityId" label="活动ID">
        <a-input v-model="listParams.activityId" placeholder="请输入" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item field="keyword" label="活动名称">
        <a-input v-model="listParams.keyword" placeholder="请输入" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="bgfff px-20 px-50 flex flex-a-c flex-j-a mb-20 pt-40">
      <div class="flex-col-center">
        <div class="flex flex-a-c text-size-24 mb-4">
          <div class="flex-col flex-a-c">
            <span class="font-bold">{{ amount.waitNnm }}</span>
            <span class="text-size-14 nowrap mt-m">活动数量</span>
          </div>
          <div class="w-15n h-1"></div>
          <div class="flex-col flex-a-c m-relative" style="color: #43cf7c">
            <a-button
              class="mb-4 font-bold text-size-16 m-absolute position-center-x"
              style="top: -38px"
              type="text"
              status="warning"
              >待发放</a-button
            >
            <span class="font-bold">￥{{ amount.waitAmount }}</span>
            <span class="text-size-14 nowrap mt-m">奖励金额</span>
          </div>
          <div class="w-15n h-1"></div>
          <div class="flex-col flex-a-c" style="color: red">
            <span class="font-bold">{{ amount.waitUserNnm }}</span>
            <span class="text-size-14 nowrap mt-m">奖励人数</span>
          </div>
        </div>
      </div>
      <div style="width: 2px; height: 100px; background: #e8e8e8; transform: translateY(-20px)"></div>
      <div class="flex-col-center">
        <div class="flex flex-a-c text-size-24 mb-4">
          <div class="flex-col flex-a-c">
            <span class="font-bold">{{ amount.finishNnm }}</span>
            <span class="text-size-14 nowrap mt-m">活动数量</span>
          </div>
          <div class="w-15n h-1"></div>
          <div class="flex-col flex-a-c m-relative" style="color: #43cf7c">
            <a-button
              class="mb-4 font-bold text-size-16 m-absolute position-center-x"
              style="top: -38px"
              type="text"
              status="success"
              >已发放</a-button
            >
            <span class="font-bold">￥{{ amount.finishAmount }}</span>
            <span class="text-size-14 nowrap mt-m">奖励金额</span>
          </div>
          <div class="w-15n h-1"></div>
          <div class="flex-col flex-a-c" style="color: red">
            <span class="font-bold">{{ amount.finishUserNnm }}</span>
            <span class="text-size-14 nowrap mt-m">奖励人数</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 w-full m-relative">
      <div class="m-absolute t-0 l-0 b-0 r-0 overflow-hidden flex">
        <GiTable
          row-key="id"
          id="mtddb"
          v-model:columns="columns"
          :loading="loading"
          :data="tableData"
          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
          :row-selection="{ type: 'checkbox', showCheckedAll: true }"
          v-model:selectedKeys="selectedKeys"
          :pagination="pagination"
          @refresh="getTableData"
        >
          <template #custom-extra>
            <a-checkbox v-model="waitDesc" @change="changeCurrent(1)">优先排序未审核</a-checkbox>
          </template>
          <template #activity="{ record }">
            <div class="flex flex-col flex-a-c">
              <span>{{ record.activityName }}</span>
              <span>{{ record.activityStartTime }} - {{ record.activityEndTime }}</span>
            </div>
          </template>
          <template #time="{ record }">
            <div class="flex flex-col flex-a-c">
              <span>{{ record.activityAwardStartTime }}</span>
              <span>{{ record.activityAwardEndTime }}</span>
            </div>
          </template>
          <template #status="{ record }">
            <div class="flex-col flex-a-c">
              <div class="flex flex-a-c">
                <icon-clock-circle class="mr-4" style="color: #f53f3f" :size="16" v-if="record.status == 20" />
                <GiDot
                  :type="
                    record.status == 10
                      ? 'warning'
                      : record.status == 20
                      ? 'danger'
                      : record.status == 30
                      ? 'success'
                      : record.status == 40
                      ? 'success'
                      : 'info'
                  "
                  :text="
                    record.status == 0
                      ? '上传中'
                      : record.status == 10
                      ? '待审核'
                      : record.status == 20
                      ? '催审核'
                      : record.status == 30
                      ? '审核通过，待发放'
                      : record.status == 40
                      ? '已发放'
                      : record.status == -100
                      ? '审核不通过'
                      : '--'
                  "
                  :animation="false"
                />
              </div>
              <span v-if="record.status == 10 || record.status == 20">
                <CountdownTimer
                  :targetTime="record.batchCreateTime"
                  :color="record.status == 10 ? '#ff7d00' : '#f53f3f'"
                />
              </span>
            </div>
          </template>
          <template #action="{ record }">
            <a-button
              type="text"
              size="small"
              @click="onExamine(record)"
              :disabled="record.status != 10 && record.status != 20"
            >
              审核
            </a-button>
            <a-button type="text" size="small" @click="onDetails(record)" :disabled="!record.batchId">
              奖励明细
            </a-button>
            <a-button type="text" size="small" @click="onLog(record)"> 日志 </a-button>
          </template>
        </GiTable>
      </div>
    </div>
  </div>
</template>

<script setup>
import { activitySettleSearch, settleHeadData } from '@/apis'
import { deleteEmpty, reAssign } from '@/utils/common'
import Examine from './Examine.vue'
import Log from './Log.vue'
import { usePagination, useLayer } from '@/hooks'

const router = useRouter()

const columns = ref([
  {
    title: '活动ID',
    width: 110,
    dataIndex: 'activityId',
    align: 'center'
  },
  {
    title: '申请人',
    width: 110,
    dataIndex: 'applicant',
    align: 'center'
  },
  {
    title: '活动',
    width: 370,
    slotName: 'activity',
    align: 'center'
  },
  {
    title: '奖励发放时间',
    width: 180,
    slotName: 'time',
    align: 'center'
  },
  {
    title: '奖励人数(人)',
    width: 130,
    dataIndex: 'awardNum',
    align: 'center'
  },
  {
    title: '奖励总金额(元)',
    width: 140,
    render: ({ record }) => {
      const awardAmount = record.awardAmount
      return `￥${awardAmount}`
    },
    align: 'center'
  },
  {
    title: '发放状态',
    width: 140,
    slotName: 'status',
    align: 'center'
  },

  {
    title: '操作',
    width: 120,
    fixed: 'right',
    align: 'center',
    slotName: 'action'
  }
])

const amount = reactive({
  finishAmount: 0,
  finishNnm: 0,
  finishUserNnm: 0,
  waitAmount: 0,
  waitNnm: 0,
  waitUserNnm: 0
})
const loading = ref(false)
const tableData = ref([])
const selectedKeys = ref([])
const waitDesc = ref(true)
const listParams = reactive({
  page: 1,
  size: 10,
  type: 8,
  activityId: undefined,
  keyword: undefined,
  startTime: undefined,
  endTime: undefined,
  status: undefined
})

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })

const getPageInfo = async () => {
  const res = await settleHeadData(deleteEmpty({ ...listParams, waitDesc: waitDesc.value ? 1 : 0 }))
  reAssign(amount, res.data)
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await activitySettleSearch(deleteEmpty({ ...listParams, waitDesc: waitDesc.value ? 1 : 0 }))
    tableData.value = res.data.data
    setTotal(res?.data?.total || 0)
    getPageInfo()
  } finally {
    loading.value = false
  }
}
getTableData()

const onExamine = (item) => {
  useLayer().openLayer(
    Examine,
    {
      title: `${item.activityName}-奖励发放审核`,
      params: { ...item },
      area: ['900px', '80%']
    },
    getTableData
  )
}

const onDetails = (item) => {
  router.push({
    name: 'rewardDetailsMtddb',
    query: { id: item?.id, batchId: item.batchId }
  })
}

const onLog = (item) => {
  useLayer().openLayer(
    Log,
    {
      title: `${item.activityName}-操作日志`,
      params: { ...item },
      area: ['900px', '80%']
    },
    getTableData
  )
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
  getPageInfo()
}

// 列表重置搜索
const onResetSearch = () => {
  listParams.paymethod =
    listParams.activityId =
    listParams.keyword =
    listParams.startTime =
    listParams.endTime =
    listParams.status =
      undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow: hidden;
  // margin: $margin;
  padding: $margin;

  padding-bottom: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  :deep(.arco-row) {
    width: 100%;
  }
  .form {
    background: var(--color-bg-1);
    padding: $margin;
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  .row_wrap {
    background: var(--color-bg-1);
    padding: $margin;
    margin-bottom: $margin;
    text-align: center;
    .arco-col {
      position: relative;
      &:not(:last-child):after {
        position: absolute;
        content: '';
        right: 0;
        top: 50%;
        transform: translate(0%, -50%);
        width: 1px;
        height: 30px;
        background: #eee;
      }
    }
    span {
      display: inline-block;
      margin: 10px 0;
      color: rgba(32, 32, 32, 1);
    }
  }
  .gi-table {
    background: var(--color-bg-1);
    padding: $margin;
  }

  .span_color {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    &.color_-2 {
      background: rgba(186, 186, 186, 1);
    }
    &.color_1 {
      background: rgba(59, 201, 105, 1);
    }
    &.color_0 {
      background: rgba(245, 121, 23, 1);
    }
  }
}
</style>
